<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 17675
  Date: 2025/5/22
  Time: 14:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--设置模板生成的基本路径，保证所有的url资源都是重根目录出发的-->
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Register</title>
    <!--设置模板生成的基本路径，保证所有的url资源都是重根目录出发的-->
    <base href="<%=basePath%>">

    <!--使用bootsrap前端框架，快速开发，这里引入框架的网络引擎接口-->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>


<body>

<!--从框架给的模板中，复制出自己想要的内容进行修改-->
<div class="container">
    <h1 style="text-align: center">用户管理系统----修改用户信息</h1>

    <div class="row">
        <div class="col-md-3"></div>

        <div class="col-md-6">
            <!--这里的表单提交中：action由于配置了基础路径所以这里就不加/了，如果不配置基本路径，加/浏览器默认是站点根目录而不是相对路径，就需要再加上缺失路径
            enctype="multipart/form-data"说明的是表单提交中包含多种类型的格式文件，因为我们这里需要上传文件，所以这样设置
            -->
            <form action ="user/update" method="post" enctype="multipart/form-data">
                <img width="50px" src="${requestScope.user.profile}">
                <input type="hidden" name="id" value="${requestScope.user.id}">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <!--一定注意，id是标签在前端框架中的唯一确定，class是样式类型种类，name是与后端交互属性-->
                    <input value="${requestScope.user.username}" type="text" class="form-control" id="username" name="username" placeholder="用户名"><span id="msg" style="color:red"></span>
                </div>

                <div class="form-group">
                    <label for="profile">头像</label>
                    <input type="file" id="profile" name="profile">
                </div>

                <button type="submit" class="btn btn-default">修改</button>
            </form>
        </div>

        <div class="col-md-3"></div>
    </div>
</div>
<!--实现异步刷新请求，在不刷新页面的情况下ajax发送请求，通过返回请求刷新部分内容-->
<script>

</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script>

    let usernameInput = document.getElementById("username");
    usernameInput.addEventListener("blur",function(){
        //第一个参数是url,第二个参数是要传入的data,第三个参数是回调函数代表请求成功之后要完成的工作
        $.post("user/checkUserName",{username: usernameInput.value},
            function(data){
                if(data === "yes"){
                    document.getElementById("msg").innerText = "用户名已经存在"
                }else{
                    document.getElementById("msg").innerText = "用户名合规"
                }
        });
    })
</script>
</body>
</html>
